
// useEffect 
// useEffect方法是在每次渲染之后执行，
// 可以理解为class写法中的 componentDidMount / componentDidUpdate / componentWillUnmount

// useEffect  第一个参数 是回调函数
// 第二个参数 不写 任何数据改变都能进来 
// 第二个参数 [] 不传参数 任何状态的改变都不会执行    [text]  只有你修改text 才会执行 

import {useState,useRef,useEffect} from "react"
import {ajax} from "@/utils/request"
export function HookSThree(){

  let [count,setCount] = useState(2000)
  let [word,setWord] = useState("2107-daydayup")
  let [flag,setFlag] = useState(true)
  let inp = useRef()

  useEffect(()=>{
    console.log("纯函数组件初始化 - useEffect - componentDidMount ")
  },[word])



  function changeWord(){
    setWord(inp.current.value);
    inp.current.value = ""
  }
  return (
    <div>
      <h2> HookSThree - 3 </h2>
      <h3>count -- {count}  <button onClick={()=>setCount(++count)} >点击修改 count </button></h3> 
      <h3>word == {word }</h3>
      <p>
        <input type="text" value={word} ref={inp} onChange={changeWord}/>
      </p>
      <button onClick={()=>setFlag(!flag)}>点击切换显示和隐藏</button>
      <hr/>
      {flag&&<GoodList></GoodList>}
    </div>
  )
}


function GoodList(){
  const [movie,setMovie] = useState([])
  const getList = async ()=>{
    let res = await ajax.get("http://localhost:4400/movie")
    setMovie(res.data.result)
  }
  useEffect(()=>{
    console.log("纯函数初始化都会进来 - goodlist") 
    getList()

    return ()=>{
      console.log("组件被销毁了才会进入 - componentWillUnmount")
    }
  },[])
  return (
    <div>
      <h2>电影列表 </h2> 
      {
        movie.map((l,i)=>{
          return (
            <p key={i}>
              {l.title} - {i}
            </p>
          )
        })
      }
    </div>
  )
}